<template>
    <div class="login-container">

        <el-form ref="form" :model="form" label-width="80px">
            
            <el-form-item label="用户名：">
                <el-input placeholder="请输入用户名" name="username" v-model="form.username">
                    <i slot="prefix" class="el-input__icon"><svg-icon icon-class="user" /></i>
                </el-input>
            </el-form-item>

            <el-form-item label="密 码：">
                <el-input placeholder="请输入密码" type="password" name="password" v-model="form.password">
                    <i slot="prefix" class="el-input__icon"><svg-icon icon-class="sign" /></i>
                </el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" 
                    :loading="loading"
                    @click="onSubmit">
                    登&nbsp;&nbsp;&nbsp;&nbsp;录
                </el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>

export default {
    data(){
        return {
            form: {
                username: '',
                password: ''
            },
            loading: false,
        }
    },
    methods: {
        onSubmit(){
            this.loading = true
            this.$store.dispatch('LoginByUsername', this.form).then(() => {
                this.loading = false
                this.$router.push({ path: '/' })
            }).catch(() => {
                this.loading = false
            })
            
        }
    }
}
</script>

<style rel="stylesheet/scss" lang="scss">

.login-container{
    background-color: rgba(132, 146, 226, 0.568);
    border-radius: 20px;
    width: 550px;
    height: 350px;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding:50px 40px 50px 20px;
}

.el-form-item__label{
    margin-top: 20px;
}

.el-form-item__content{
    margin-top: 20px;
}

.el-button--primary{
    margin-left: 80px;
    width:200px;
    font-size: 18px;
}

</style>